<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }
        body{
            vertical-align: top;

        }
        #box{
            width: 350px;
            height: 350px;
            margin: 100px 0 0 100px;
            position: relative;
        }
        #small_box{
            width: 100%;
            height: 100%;
            position: relative;
            border: 1px solid #ccc;
        }
        #small_box img{
            width: 350px;
            height: 350px;
        }
        #mask{
            width: 100px;
            height: 100px;
            background: rgba(255,255,0,.6);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;

        }
        #big_box{
            width: 600px;
            height: 600px;
            border: 1px solid #ccc;
            position: absolute;
            top: 0;
            left: 360px;
            display: none;
            overflow: hidden;
        }
        #list{
            margin: 20px 0 0 0;
        }
        #list img{
            margin: 3px;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="small_box">
        <img src="images/pic001.jpg" alt="">
        <span id="mask"></span>
    </div>
    <div id="big_box">
        <img src="images/pic01.jpg" style="position: absolute; left:0; top:0;">
    </div>
    <div id="list">
        <img src="images/pic0001.jpg" alt="">
        <img src="images/pic0002.jpg" alt="">
        <img src="images/pic0003.jpg" alt="">
    </div>
</div>
<script>
    window.onload=function () {
        var small_box = document.getElementById("small_box");
        var mask = document.getElementById("mask");
        var big_box = document.getElementById("big_box");
        var big_img = big_box.children[0];
        var list_img = document.getElementById("list").children;
        small_box.onmouseover=function () {
            mask.style.display = 'block';
            big_box.style.display = 'block';
            small_box.onmousemove=function (event) {
                var event =event ||window.event
                var pointX = event.clientX - small_box.offsetParent.offsetLeft-mask.offsetWidth * 0.5;
                var pointY = event.clientY - small_box.offsetParent.offsetTop-mask.offsetHeight*0.5;

                if(pointX < 0){
                    pointX = 0;
                }else if(pointX >= small_box.offsetWidth - mask.offsetWidth){
                    pointX = small_box.offsetWidth - mask.offsetWidth;
                }

                if(pointY < 0){
                    pointY = 0;
                }else if(pointY >= small_box.offsetHeight - mask.offsetHeight){
                    pointY = small_box.offsetHeight - mask.offsetHeight;
                }

                mask.style.left = pointX+"px";
                mask.style.top = pointY+"px";

                big_img.style.left = - pointX / (small_box.offsetWidth / big_box.offsetWidth) + 'px';
                big_img.style.top = - pointY / (small_box.offsetHeight / big_box.offsetHeight) + 'px';
            }
        }
        small_box.onmouseout=function () {
            mask.style.display = '';
            big_box.style.display = '';
        }
        for(var i=0;i<list_img.length;i++){
            (function (i) {
                var img = list_img[i];
                img.onmouseover=function () {
                    small_box.children[0].src="images/pic00"+ (i + 1) +".jpg";
                    big_img.src = "images/pic0"+ (i + 1) +".jpg"
                }
               
            })(i);
        }
    }
</script>
</body>
</html>